import React, { Component } from 'react'
import StateSons from './components/StateSon';
export class StateClass extends Component {
    // 初始化
    constructor(props){
        super(props)
        console.log("constructor");
        this.state = {
            arr:[4,5,6]
        }
    }
    //组件挂载时调用的生命周期  请求数据 挂在dom  类似于vue中 mounted
    componentDidMount(){
        console.log("componentDidMount");
    }

    // 这个钩子函数 返回一个布尔值 如果返回true 下面的代码继续执行 如果返回false 下面的代码不执行 
    // shouldComponentUpdate(props,nextState){
    //     //  debugger  
    //     console.log("shouldComponentUpdate");
    //     return false 
    // }
    
    //更新dom时 出发的生命周期
    componentDidUpdate(){
        console.log("componentDidUpdate");
        // this.forceUpdate() 强制渲染dom
    }
    //组件离开时执行的生命周期
    componentWillUnmount(){
        console.log("componentWillUnmount");
    }
  render() {
      console.log("1.render");
    return (
      <div>
          StateClass
          <StateSons arr={this.state.arr}></StateSons>
          <button onClick={()=>this.setState({arr:[1,2,3]})}>点我</button>
    </div>
    )
  }
}

export default StateClass